<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: #000;
        }

        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

    <div class="a">
        <div class="b"></div>
    </div>


    <img src="../images/4.jpg" alt="">

    <script>

        // click   单击
        // dblclick   双击
        // mouseup    鼠标抬起
        // mousedown  鼠标按下      e.button  确认点的是左键，滚轮或者右键  0 / 1 / 2
        // mouseover  mouseout  鼠标移入移出   ！！！！！！！！！！！！！！！！！
        // mouseenter  mouseleave  鼠标移入移出    支持事件捕获流
        // mousemove  鼠标移动



        document.ondblclick = function() {
            console.log('双击666');
        }

        document.addEventListener('dblclick',function() {
            console.log('双击666666');
        })



        document.onclick = function() {
            console.log('单击');
        }
        document.onmousedown = function() {
            console.log('鼠标按下');
        }
        document.onmouseup = function(e) {
            console.log('鼠标抬起');
    
            // e.button  0左键  1滚轮  2右键
            console.log(e.button);  // 0  1   2

        }




        // 鼠标移入移出
        var oA = document.querySelector('.a') ;
        var oB = document.querySelector('.b') ;

        // oA.onmouseover = function() {
        //     console.log('a over');
        // }

        // oA.onmouseout = function() {
        //     console.log('a out');
        // }

        // oB.onmouseover = function() {
        //     console.log('b over');
        // }

        // oB.onmouseout = function() {
        //     console.log('b out');
        // }



        oA.onmouseenter = function() {
            console.log('a over');
        }

        oA.onmouseleave = function() {
            console.log('a out');
        }

        oB.onmouseenter = function() {
            console.log('b over');
        }

        oB.onmouseleave = function() {
            console.log('b out');
        }






        oA.onmousemove = function() {
            console.log('move');
            var r = parseInt(Math.random() * 256) ;
            var g = parseInt(Math.random() * 256) ;
            var b = parseInt(Math.random() * 256) ;
            this.style.background =  `rgb(${r} , ${g} , ${b})` ;
            
        }
        

        var oImg = document.querySelector('img') ;
        var imgArr = ['../images/4.jpg' , '../images/5.jpg' , '../images/6.jpg' , '../images/7.jpg'] ;
        oImg.onmousemove = function() {
            var index = parseInt(Math.random() * imgArr.length) ;
            this.src = imgArr[index] ;
        }

    </script>
    
</body>
</html>